<template>
  <h3>customRef 演示 - 输入防抖效果</h3>

  <input v-model="msg">
  <div>{{msg}}</div>

  <hr>
  <p>
    注意:<br>
    <br>
    创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。<br>
    官方文档: <a href="https://v3.cn.vuejs.org/api/refs-api.html#customref"><b>customRef</b></a>
  </p>
</template>

<script>
import {customRef} from 'vue'

export default {
  setup() {
    function myDebounceRef(value, delay) {
      let timer = null
      return customRef((track, trigger) => {
        return {
          get() {
            console.log(`reading <${value}>`)
            track()
            return value
          },
          set(newValue) {
            clearTimeout(timer)
            timer = setTimeout(() => {
              console.log(`set to <${value}>`)
              value = newValue
              trigger()
            }, delay);
          }
        }
      })
    }

    let msg = myDebounceRef('test', 500)

    return {msg}
  },
}
</script>